<template>
  <div class="login-container">
    <form @submit.prevent="registUser">
      <div class="form-group">
        <label for="username">账号</label>
        <input type="text" id="username" v-model.trim="userInfo.username" placeholder="请输入账号" required />
      </div>

      <div class="form-group">
        <label for="password">密码</label>
        <input type="password" id="password" v-model.trim="userInfo.password" placeholder="请输入密码" required />
      </div>

      <div class="form-group">
        <label for="email">电子邮件</label>
        <input type="email" id="email" v-model.trim="userInfo.email" placeholder="请输入电子邮件" required />
      </div>


      <div class="form-group">
        <label for="email">用户类型</label>
        <select v-model="userInfo.type">
          <template v-for="(item, index) in userTypes" :key="index">
            <option :value="item.value">{{ item.label }}</option>
          </template>
        </select>
      </div>

      <button type="submit">注册</button>
    </form>
  </div>
</template>

<script setup>
import { reactive } from "vue";
import { setSelect } from "../";
import UserApi, { userTypes } from "../../api/user";

// 定义表单对应的响应式数据，也可以使用 ref 来声明
const userInfo = reactive({
  username: "",
  password: "",
  email: "",
  type: 0
});

const reset = () => {
  userInfo.username = "";
  userInfo.password = "";
  userInfo.email = "";
  userInfo.type = 0
};

// 提交表单的逻辑
const registUser = () => {
  if (userInfo.username.length < 4 || userInfo.username.length > 15) {
    alert("用户名长度应在4-15位长度之间!");
    // 获取dom对象，并聚焦。
    // 可以通过标签的 ref 属性，来使用vue功能获取dom对象，以屏蔽平台区别(node.js 和 浏览器)。
    // ref 方式获取模板对象示例:
    // 模版中，为标签增加 ref属性 :   <input ref="username"/>
    // js中，声明同名变量:           const username = ref();
    // 调用其方法：                 username.value.focus(); 不在再使用下面的web api，从而屏蔽平台差别。
    document.getElementById("username").focus();
    return false;
  }

  if (userInfo.password.length < 4 || userInfo.password.length > 15) {
    alert("密码长度应在4-15位长度之间!");
    // 获取dom对象，并聚焦
    document.getElementById("password").focus();
    return false;
  }

  if (userInfo.password.length < 4 || userInfo.password.length > 30) {
    alert("电子邮件长度应在4-30位长度之间!");
    // 获取dom对象，并聚焦
    document.getElementById("email").focus();
    return false;
  }

  // 1. 如果需要将表单字段清空，使增加到 usreList 的对象数据不受影响，则需要传值，而不能传引用。
  // 2. 通过深度拷贝对象内容来创建一个新的对象，此对象对表单对象没有影响，可以安全存入 userList 中
  // 3. 有些场景需要用户实时感知页面的变化，如收到的通知；有些场景则需要用户点击按钮后，数据再发生变化，如更改数据。
  const newUser = JSON.parse(JSON.stringify(userInfo));

  // 调用用户模块 api 方法，写入共享数据
  UserApi.registUser(newUser, () => {
    // 向用户反馈操作结果，这里以 alert 为示例
    alert("注册成功!");

    // 重置表单，此处是一种实现思路。
    reset();

    // 模拟页面跳转，只需要设置共享的响应式变量值即可。
    setSelect("userListPage");

    // 如果需要，进行其他业务逻辑
    console.log(UserApi.fetchUsers());
  });
};
</script>

<style scoped>
.login-container {
  width: 300px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background-color: #f9f9f9;
}

.form-group {
  margin-bottom: 15px;
}

label {
  display: block;
  margin-bottom: 5px;
  font-size: 14px;
}

input {
  width: 90%;
  padding: 10px;
  font-size: 14px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

input:focus {
  border-color: #007bff;
  outline: none;
}

button {
  width: 100%;
  margin-top: 20px;
  padding: 10px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}
</style>
